<template>
  <div class="box">
    <div class="head">
      <span></span>
      <span>约课记录</span>
      <span></span>
    </div>
    <div class="body">
      <van-tabs v-model="activeName">
        <van-tab title="待上课" name="a">
          <div class="con">
            <img src="../assets/images/no-message.png" alt />
            <p v-if="!login">请登录后查看相关内容</p>
            <button class="login" v-if="!login" @click="log">登录/注册</button>
            <p v-if="login">还没有待上课记录哦</p>
            <button class="login"  v-if="login" @click="go">去约课</button>
          </div>
        </van-tab>
        <van-tab title="已上课" name="b">
          <div class="con">
            <img src="../assets/images/no-message.png" alt />
            <p v-if="!login">请登录后查看相关内容</p>
            <button class="login" v-if="!login" @click="log">登录/注册</button>
            <p v-if="login">还没有上课记录哦</p>
            <button class="login"  v-if="login" @click="go">去约课</button>
          </div>
        </van-tab>
        <van-tab title="已取消" name="c">
          <div class="con">
            <img src="../assets/images/no-message.png" alt />
             <p v-if="!login">请登录后查看相关内容</p>
             <p v-if="login">还没有已取消记录哦</p>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import { Tab, Tabs } from "vant";
export default {
  components: {
    [Tab.name]: Tab,
    [Tabs.name]: Tabs
  },
  data() {
    return {
      activeName: "a",
      login:false,
      user_id:JSON.parse(localStorage.getItem('user_id'))||''
    };
  },
  methods: {
    show(){
      if(this.user_id){
        this.login=true
      }else{
        this.login=false
      }
    },
    log(){
      this.$router.push("/login")
    },
    go(){
      this.$router.push("/oto")
    }
  },
  mounted(){
    this.show()
  }
};
</script>

<style lang="scss" scoped>
.box {
}
.head {
  width: 100%;
  height: 40px;
  background: white;
  display: flex;
  border-bottom: 1px solid #f4f4f4;
  span {
    flex: 1;
    text-align: center;
    font-size: 18px;
    line-height: 40px;
  }
}
.body{
  width:100%;
  box-sizing: border-box;
.con{
  width: 100%;
  height: 460px;
  img{
    width: 45%;
    height: 120px;
    margin: 120px auto 0;
    display: block;
  }
  p{
    text-align: center;
    font-size: 15px;
    color: #B7B7B7;
  }
  .login{
    height: 20px;
    width: 100px;
    display: block;
    margin: 20px auto 0;
    border:none;
    background: #EB6100;
    color: white;
  }
}
}
</style>